<template>
  <div class="BalanceCollect">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="工单时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['rangeConfig', rangeConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="工单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
                    'workNumber',
                   {rules: [{ required: true, message: '请输入工单号!' }]}
                    ]"
              />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item
              label="合作方名称"
              :label-col="{ span: 7}"
              :wrapper-col="{ span: 16, offset: 1}"
            >
              <a-input
                placeholder="请输入"
                v-decorator="[
                   'agentName',
                   {rules: [{ required: true, message: '请输入代理商名称!' }]}
                  ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findPartnerBillPageList()">查询</a-button>
            <a-button type="dashed" style="margin: 0 2%" @click="partnerExport()">导出</a-button>
            <a-button @click="resetSearch()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card style="margin-top:2%;">
      <a-row :gutter="30">
        <a-col :span="8">
          <a-card>
            <a-row :gutter="0">
              <a-col :span="8">
                <img src="../../assets/实际入账.png" alt>
              </a-col>
              <a-col :span="15">
                <a-row :gutter="40" style="font-size:1rem;">
                  <a-col :span="18">合作方分润总额：</a-col>
                  <a-col :span="5">
                    <a-icon type="info-circle"/>
                  </a-col>
                </a-row>
                <a-row
                  :gutter="0"
                  style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                >{{ sumSharingAmount }}</a-row>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <!-- 表格模块 -->
    <a-card style="margin-top:2%">
      <a-table
        :columns="columnss"
        :dataSource="dataa"
        :pagination="pagination"
        @change="handleTableChange"
        :bordered="true"
        :rowKey="record => record.code"
      >
        <template slot="operation" slot-scope="text,record">
          <span class="blue" @click="partnerDetails(text,record)">详情</span>
        </template>
      </a-table>
    </a-card>
    <!-- 表格模块 -->

    <!-- //弹出层的新建表单 -->
    <a-modal
      title="合作方详情"
      :visible="partnervisible"
      :width="1100"
      @ok="handleOk"
      @cancel="handleCancel"
      :footer="null"
    >
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="6">
            <a-form-item label="订单号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="['goodsNameb',{rules: [{ required: true, message: '请输入订单号!' }]}]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="支付号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="['goodsNamed',{rules: [{ required: true, message: '请输入订单号!' }]}]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="支付方式"
              :label-col="{ span: 7 }"
              :wrapper-col="{ span: 16, offset: 1}"
            >
              <a-select
                placeholder="请输入"
                v-decorator="['goodsName',{rules: [{ required: true, message: '请输入订单号!' }]}]"
              >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">微信支付</a-select-option>
                <a-select-option value="2">支付宝支付</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="partnerDetailsSearch()">查询</a-button>
            <a-button type="dashed" style="margin: 0 5%" @click="exportPartnerMyBillDetailsL()">导出</a-button>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="7">
            <a-form-item label="点位名称" :label-col="{ span: 6}" :wrapper-col="{ span: 15, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="['goodsNamee',{rules: [{ required: true, message: '请输入点位号!' }]}]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-table
        :columns="popColumns"
        :dataSource="popData"
        :bordered="true"
        :rowKey="record => record.id"
        :pagination="false"
      >
        <template slot="paymentMethod" slot-scope="text,record">
          <span>{{record.paymentMethod==2?'微信支付':''}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columnss = [
  {
    title: "订单支付时间",
    dataIndex: "payTime",
    scopedSlots: { customRender: "payTime" },
    align: "center"
  },
  {
    title: "工单生成时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "createTime" },
    align: "center"
  },
  {
    title: "工单号",
    dataIndex: "code",
    scopedSlots: { customRender: "workOrderNumber" },
    align: "center"
  },
  {
    title: "合作方名称",
    dataIndex: "partnerName",
    scopedSlots: { customRender: "processingCompletionTime" },
    align: "center"
  },
  {
    title: "分润金额",
    dataIndex: "sharingAmount",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

//弹出层的表单数据
const popColumns = [
  {
    title: "订单号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderCode" },
    align: "center"
  },
  {
    title: "支付号",
    dataIndex: "payTn",
    scopedSlots: { customRender: "payTn" },
    align: "center"
  },
  {
    title: "合作方名称",
    dataIndex: "partnerName",
    scopedSlots: { customRender: "partnerName" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    scopedSlots: { customRender: "posName" },
    align: "center"
  },
  {
    title: "分润比例",
    dataIndex: "sharingDistributionRatio",
    scopedSlots: { customRender: "sharingDistributionRatio" },
    align: "center"
  },
  {
    title: "账单类型",
    dataIndex: "type",
    scopedSlots: { customRender: "type" },
    align: "center"
  },
  {
    title: "支付方式",
    dataIndex: "paymentMethod",
    scopedSlots: { customRender: "paymentMethod" },
    align: "center"
  },
  {
    title: "分润金额",
    dataIndex: "sharingAmount",
    scopedSlots: { customRender: "sharingAmount" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "paidAmount",
    scopedSlots: { customRender: "paidAmount" },
    align: "center"
  }
];

const dataa = [
  {
    key: "1"
  }
];

const popData = [
  {
    key: "1"
  }
];
export default {
  name: "BalanceCollect",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [{ type: "array", required: true, message: "请选择时间!" }]
      },
      //代理商入账总额
      sumAgentAmount: "",
      sumInAmount: "",
      sumVendorAmount: "",
      sumWxAmount: "",
      sumpartnerAmount: "",
      //合作方
      sumSharingAmount: "",
      columnss,
      dataa: [],
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      partnervisible: false,
      popColumns,
      popData: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    resetSearch() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findPartnerBillPageList();
      // this.findMyBillDetailsPageList();
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
      this.partnervisible = false;
    },
    handleCancel(e) {
      this.visible = false;
      this.partnervisible = false;
    },

    partnerDetails() {
      this.partnervisible = true;
      this.partnerDetailsSearch();
    },

    // 查询代理商每日工单
    findPartnerBillPageList() {
      this.axios
        .post(this.baseUrl + "/partnerFinancial/findPartnerBillPageList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        .then(response => {
          // console.log(response.data.data);
          this.dataa = response.data.data.t.list;
          this.sumSharingAmount = response.data.data.t.sumSharingAmount;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 合作方工单导出
    partnerExport() {
      this.axios
        .post(
          this.baseUrl + "/partnerFinancial/exportPartnerBillList",
          {
            loginToken: this.$store.state.loginToken
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "合作方余额汇总表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    },

    // 工单下合作方账单明细查询
    partnerDetailsSearch() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/partnerFinancial/findPartnerMyBillDetailsList", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response.data.data);
          this.popData = response.data.data;
        });
    },

    // 合作方工单导出
    exportPartnerMyBillDetailsL() {
      this.axios
        .post(
          this.baseUrl + "/partnerFinancial/exportPartnerMyBillDetailsL",
          {
            loginToken: this.$store.state.loginToken
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "合作方余额汇总详情表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.findPartnerBillPageList();
    // this.partnerSearch();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.BalanceCollect {
  width: 100%;
}
</style>
